<script setup lang="ts">
import { computed } from '@vue/reactivity';
import { ref } from 'vue'

const props = defineProps<{
  data: {
    speed: number,
    throttle: number,
    steer: number,
    brake: number,
    clutch: number,
    rate: number,
    max_rate: number,
    rate_gate?: number,
    gear: number,
    max_gear: number
  }
}>()
const speedArray = computed(() => {
  return props.data.speed.toFixed(1).split('')
})

const steerTranslate = computed(() => {
  return props.data.steer * 50 * 50
})
const rateLevel = computed(() => {
  return Math.round(props.data.rate / props.data.max_rate * 20)
})
const maxGear = computed(() => {
  return (props.data.max_gear || 7) + 2
})

</script>

<template>
  <div class="board">
    <div class="steer">
      <div class="center-box" :style="{ transform: `translateX(${steerTranslate}%)` }"></div>
    </div>
    <div class="speed">
      <!-- {{ data.speed.toFixed(1) }} -->
      <span v-for="(v, i) of speedArray" :key="i" :class="{dot: v==='.'}">{{v}}</span>
    </div>
    <div class="gear">
      <div class="gear-box" v-for="i in maxGear" :class="{ negtive: i < 2, idle: i === 2, active: (i > 2 && (i - 2) <= data.gear) || (data.gear == 0 && i == 2) || (data.gear == -1 && i == 1) }"></div>
    </div>
    <div class="rate-bar">
      <div class="background">
        <div class="rate-box" v-for="i of 20" :style="{ '--index': i }" :class="{ active: i < rateLevel, warning: i > (data.rate_gate || 7) * 2 }">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.board {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .steer {
    width: 100%;
    height: 3rem;

    &::after {
      position: absolute;
      width: 2px;
      height: 3rem;
      content: " ";
      background-color: #666;
      left: calc(50% - 1px);
    }

    .center-box {
      position: absolute;
      width: 2%;
      height: 2rem;
      background-color: #F00;
      left: 49%;
      top: 0.5rem;
    }
  }

  .rate-bar {
    margin-bottom: 2rem;
    .background {
      width: 250vh;
      display: flex;
      justify-content: space-around;

      .rate-box {
        height: 5rem;
        width: calc(5% - 0.1rem);
        background-color: #222;

        &.active {
          background-color: #0F0;
        }

        &.warning {
          background-color: #F004;
        }

        &.warning.active {
          background-color: #F00;
        }
      }
    }
  }

  .gear {
    display: flex;
    margin-left: 120vh;

    .gear-box {
      width: 3rem;
      height: 3rem;
      background-color: #111;
      border: 0.2rem solid #333;
      margin-right: 0.2rem;
      &.idle {
        width: 1rem;
        margin-left: 2rem;
        margin-right: 2.2rem;
      }
      &.active {
        background-color: #0F0;
      }
      &.negtive.active {
        background-color: rgb(255, 166, 0);
      }
      &.idle.active {
        background-color: rgb(199, 242, 255);
      }
    }
  }

  .speed {
    font-family: lcd;
    font-size: 13rem;
    color: #EEE;
    display: flex;
    align-items: center;
    height: 140px;
    position: absolute;
    left: 310px;
    top: 30px;
    span {
      width: 62px;
      &.dot {
        width: auto;
      }
    }
  }
}
</style>
